<template>
	<view class="wf-box" :style="{ paddingTop: totalheight }">
		<HeadNav titleName="我要留言" :topheight="navBarHeight"></HeadNav>

		<view class="main">
			<view class="tit">标题</view>
			<textarea class="title-issue" placeholder="请输入问题标题" v-model="title"></textarea>

			<view class="tit mt-f">问题内容</view>
			<textarea class="content-question" placeholder="请输入问题具体内容" v-model="content"></textarea>

			<view class="tit mt-f">上传图片</view>
			<view class="mt-t">
				<uni-file-picker @select="select" class="file" limit="3" @delete="deleteImg"></uni-file-picker>
			</view>
		</view>

		<view class="footer">
			<view @click="appeals">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import UNI_APP from '@/.env.js'
	import { uploadImage, addMessageApi } from '@/api/api.js'
	import navBarMixin from '@/mixin/navBarMixin.js'
	import HeadNav from "@/components/HeadNav"
	export default {
		data() {
			return {
				title: '',
				content: '',
				fileArray: [],
				images: [],
			}
		},
		mixins: [navBarMixin],
		components: {
			HeadNav
		},
		methods: {
			select(e) {
				var file = e.tempFilePaths
				this.fileArray = [...this.fileArray, ...file]

				console.log('this.fileArray===', this.fileArray)
			},
			deleteImg(e) {
				const file = e.tempFilePath
				this.fileArray = this.fileArray.filter(item => item != file)
			},
			async appeals() {

				for (var i = 0; i < this.fileArray.length; i++) {
					const res = await uploadImage(this.fileArray[i])
					
					const resData = JSON.parse(res)
					
					// console.log('resData===',resData)
					
					this.images.push(resData.data)
					
				}
				
				const res = await addMessageApi({
					images: this.images,
					content: this.content,
					title: this.title
				})
				if (!res.code) {
					uni.showToast({
						title: '留言成功',
						icon: 'none'
					})
				
					setTimeout(() => {
						uni.navigateBack()
					}, 2000)
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}


			}


		}
	}
</script>

<style lang="less" scoped>
	.wf-box {
		overflow: hidden;
		padding-bottom: 60rpx;

		.main {
			margin-top: 30rpx;
			background: #fff;
			padding: 30rpx 30rpx;
			padding-bottom: 80rpx;

			.tit {
				font-size: 32rpx;

				&.mt-f {
					margin-top: 40rpx;
				}

			}

			.title-issue {
				height: 160rpx;
				width: 100%;
				margin-top: 20rpx;
				box-sizing: border-box;
				background: #F7F7F7;
				padding: 20rpx;
				border-radius: 10rpx;
				font-size: 24rpx;
			}

			.content-question {
				margin-top: 20rpx;
				width: 100%;
				height: 300rpx;
				padding: 20rpx;
				box-sizing: border-box;
				background: #F7F7F7;
				border-radius: 10rpx;
				font-size: 24rpx;
			}

			.mt-t {
				margin-top: 30rpx;

				::v-deep(.icon-add) {
					&::before {
						display: none;
					}
				}
			}
		}

		.footer {
			margin-top: 90rpx;
			padding: 0 100rpx;

			view {
				line-height: 80rpx;
				text-align: center;
				background: #3F93FF;
				color: #fff;
				border-radius: 50rpx;
			}
		}
	}
</style>